@<template>
  <div class="detail-comment-info" v-if="Object.keys(commentInfo).length!=0">
      <div >
          <span>用户评价</span><span>更多</span>
      </div>
      <div>
          <span><img :src="commentInfo.user.avatar" alt=""></span>
          <span>{{commentInfo.user.uname}}</span>
          <p>{{commentInfo.content}}</p>
      </div>
      <div>
          <span v-if="fmDate">{{fmDate}}</span>
          <span>{{commentInfo.style}}</span>
          
      </div>
      <div>
          <img v-for="(item, index) in commentInfo.images" :src="item" alt="" :key="index">
      </div>
      <h3>猜你喜欢</h3>
  </div>
</template>

<script>
import {formatDate} from "@/common/utils"
export default {
    props: {
        commentInfo: {
            type: Object,
            default: {}
        }
    },
    computed: {
        fmDate(){
           return formatDate(this.commentInfo.created)
        }
    }
}
</script>

<style>
.detail-comment-info div:nth-of-type(1){
    display: flex;
    line-height: 40px;
    /* background-color: red; */
    padding: 0 10px;
    font-size: 18px;
    justify-content: space-between;
    border-top: 1px solid #f4f4f4;
    border-bottom: 1px solid #f4f4f4;
    margin: 10px 0;
}
.detail-comment-info div:nth-of-type(1) span:last-child {
    font-size: 12px;
}
.detail-comment-info div:nth-of-type(2){
    padding: 10px;
    margin-top: 10px;
}

.detail-comment-info div:nth-of-type(2) span img{
    width: 40px;
    vertical-align: middle;
}
.detail-comment-info div:nth-of-type(2) span:nth-of-type(2) {
    margin-left: 10px;
    /* background-color: red; */
    font-size: 18px;
}
.detail-comment-info div:nth-of-type(2) p {
    margin-top: 20px;
    line-height: 24px;
}
.detail-comment-info div:nth-of-type(3) {
    display: flex;
    padding: 0 10px;
    margin-bottom: 10px;
    justify-content: space-between;
    color: rgba(0,0,0,.3)
} 
.detail-comment-info div:nth-of-type(4) {
    padding: 10px;
}
.detail-comment-info div:nth-of-type(4) img{
    width: 25%;
    margin-right: 5px;
}
.detail-comment-info h3 {
    text-align: center;
    line-height: 50px;
    
}
</style>